<template>
  <div class="pdf-container">
    <!-- 导航栏 -->
    <div class="navbar">
      <div class="nav-back" @click="$router.go(-1)">
        <i class="fas fa-chevron-left"></i>
        返回首页
      </div>
      <div class="nav-title"></div>
      <div class="toolbar">
        <button @click="downloadPDF" class="download-btn">📥 下载PDF</button>
      </div>
    </div>

    <div class="pdf-viewer">
      <object
        :data="report_url"
        type="application/pdf"
        width="100%"
        height="100%"
      >
        <div class="fallback">
          <p>无法显示PDF文档</p>
          <a :href="report_url" download class="fallback-link"
            >点击下载PDF文件</a
          >
        </div>
      </object>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      report_url: "",
    };
  },
  created() {
    this.report_url = this.$route.query.report_url;
  },
  methods: {
    downloadPDF() {
      const link = document.createElement("a");
      link.href = this.report_url;
      link.download = "document.pdf";
      link.click();
    },
  },
};
</script>

<style scoped>
.pdf-container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.navbar {
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background: white;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15px;
  z-index: 1000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.nav-back {
  padding: 8px 16px;
  background: #40a2f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.nav-back:hover {
  background: #e0e0e0;
}

.nav-title {
  color: #333;
  font-size: 18px;
  font-weight: 600;
}
.toolbar {
  padding: 16px;
}

.download-btn {
  padding: 8px 16px;
  background: #40a2f4;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.pdf-viewer {
  flex: 1;
}

.fallback {
  padding: 40px;
  text-align: center;
}

.fallback-link {
  color: #40a2f4;
  text-decoration: none;
}
</style>
